<template>
  <div class="constellation-chart-container">
    <div class="constellation-chart">星座</div>
    <div id="id" :style="{ width: '98%', height: '90%' }"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
interface PropsTypes {
  id: string;
  title: string;
  listData: [];
  styleData: object;
}
const props = withDefaults(defineProps<PropsTypes>(), {
  id: "",
  title: "",
  listData: [],
  styleData: {}
});
onMounted(() => {
  console.log(props, "props");
  initChart();
});
var img =
  "";

var trafficWay = [
  {
    name: "火车",
    value: 20
  },
  {
    name: "飞机",
    value: 10
  },
  {
    name: "客车",
    value: 30
  },
  {
    name: "轮渡",
    value: 40
  }
];

let data = [];
let color = [
  "#00ffff",
  "#00cfff",
  "#006ced",
  "#ffe000",
  "#ffa800",
  "#ff5b00",
  "#ff3000"
];
for (var i = 0; i < trafficWay.length; i++) {
  data.push(
    {
      value: trafficWay[i].value,
      name: trafficWay[i].name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[i],
          shadowColor: color[i]
        }
      }
    },
    {
      value: 2,
      name: "",
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0
        }
      }
    }
  );
}
// let seriesOption = [
//   {
//     name: "",
//     type: "pie",
//     clockWise: false,
//     radius: [105, 109],
//     hoverAnimation: false,
//     itemStyle: {
//       normal: {
//         label: {
//           show: true,
//           position: "outside",
//           color: "#ddd",
//           formatter: function (params) {
//             var percent = 0;
//             var total = 0;
//             for (var i = 0; i < trafficWay.length; i++) {
//               total += trafficWay[i].value;
//             }
//             percent = ((params.value / total) * 100).toFixed(0);
//             if (params.name !== "") {
//               return (
//                 "交通方式：" +
//                 params.name +
//                 "\n" +
//                 "\n" +
//                 "占百分比：" +
//                 percent +
//                 "%"
//               );
//             } else {
//               return "";
//             }
//           }
//         },
//         labelLine: {
//           length: 30,
//           length2: 100,
//           show: true,
//           color: "#00ffff"
//         }
//       }
//     },
//     data: data
//   }
// ];
function initChart() {
  // const pieChart = document.getElementById(props.id);
  const pieChart = document.getElementById('id');
  const chart = echarts.init(pieChart);
  chart.setOption({
    backgroundColor: "#0A2E5D",
    color: color,
    title: {
      text: "交通方式",
      top: "48%",
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: "#fff",
        fontSize: 22,
        fontWeight: "400"
      }
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 178,
            height: 178
          },
          left: "center",
          top: "center",
          position: [100, 100]
        }
      ]
    },
    tooltip: {
      show: false
    },
    legend: {
      icon: "circle",
      orient: "horizontal",
      // x: 'left',
      data: ["火车", "飞机", "客车", "轮渡"],
      right: 340,
      bottom: 150,
      align: "right",
      textStyle: {
        color: "#fff"
      },
      itemGap: 20
    },
    toolbox: {
      show: false
    },
    series: [
  {
    name: "",
    type: "pie",
    clockWise: false,
    radius: [105, 109],
    hoverAnimation: false,
    itemStyle: {
      normal: {
        label: {
          show: true,
          position: "outside",
          color: "#ddd",
          formatter: function (params) {
            var percent = 0;
            var total = 0;
            for (var i = 0; i < trafficWay.length; i++) {
              total += trafficWay[i].value;
            }
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return (
                "交通方式：" +
                params.name +
                "\n" +
                "\n" +
                "占百分比：" +
                percent +
                "%"
              );
            } else {
              return "";
            }
          }
        },
        labelLine: {
          length: 30,
          length2: 100,
          show: true,
          color: "#00ffff"
        }
      }
    },
    data: data
  }
];
  });
}
</script>

<style lang="less" scoped></style>
